<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="Cache-Control" content="no-cache"> 
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,target-densitydpi=device-dpi,user-scalable=0;">
<link href="<%=request.getContextPath()%>/css/order.css?r=<%=Math.random() %>" rel="stylesheet"/>
<link href="<%=request.getContextPath()%>/jquery/jquery.mobile-1.4.5.min.css" rel = "stylesheet" />
<script src="<%=request.getContextPath()%>/jquery/jquery-2.1.3.min.js"></script>
<script src="<%=request.getContextPath()%>/jquery/jquery.mobile-1.4.5.min.js"></script>
<script src="<%=request.getContextPath()%>/jquery/jquery.form.js"></script>
<title>房屋预约页面</title>
</head>
<body class = "no-cache">
<script>
	
	function degConvert(x) {
		return x/180 * Math.PI; 
	}
	
	function bed_position(wr, hr, x_scale, y_deg, bed_deg, bed_no) {
		var x,y;
		x = wr * x_scale;
		if (x_scale <= 1) {
			y = (wr - x) * Math.tan(degConvert(Math.abs(y_deg)));
		} else {
			y = (x - wr) * Math.tan(degConvert(Math.abs(y_deg)));
		}
		if (y_deg < 0) {
			y = hr + y;
		} else {
			y = hr - y;
		}
		$('#' + bed_no).css({
			"transform": "translate(" + x + "px," + y + "px)" + " rotate(" + bed_deg + "deg)",
			"-webkit-transform": "translate(" + x + "px," + y + "px)" + " rotate(" + bed_deg + "deg)"
		});
	}
		
	$(document).on("pagecreate", "#page", function() {
		var width = $(window).width();
		var height =  $(window).height();
		width = width > 800 ? 800 : width;
		$('#room_layout img').css("width",  width + "px");
		$('#select_bed').css('width', width * 3/4);
		$('#selected_bed').css('width', width * 0.5);
		$('#order_info').css({
			"transform": "translate(" + 10 + "px," + (width + (height - width) / 2) + "px)",
			"-webkit-transform": "translate(" + 10 + "px," + (width + (height - width) / 2) + "px)"
		});
		$('#srcoll_words').css({
			"transform": "translate(" + 0 + "px," + (width) + "px)",
			"-webkit-transform": "translate(" + 0 + "px," + (width) + "px)"
		});
		$('.room').css({
			"width": 6/60 * width + "px",
			"height": 6/60 * width + "px"
		});
		var hr = width / 2;
		var wr = width / 2;
		/* x = wr * 0.15;
		y = hr + (wr - x) * Math.tan(degConvert(2));
		$('#room_1').css({
			"transform": "translate(" + x + "px," + y + "px)" + " rotate(-90deg)",
			"-webkit-transform": "translate(" + x + "px," + y + "px)" + " rotate(-90deg)"
		});  */
		
		
		bed_position(wr, hr, 0.23, -20, -120, '306-1');
		bed_position(wr, hr, 0.35, -35, -125, '306-2');
		
		bed_position(wr, hr, 0.58, -55, -160, '307-1');
		bed_position(wr, hr, 0.79, -72.5, -164, '307-2');
		
		bed_position(wr, hr, 1.07, -84, 160, '308-1');
		bed_position(wr, hr, 1.25, -67.5, 160, '308-2');
		
		bed_position(wr, hr, 1.5, -40, 130, '309-1');
		bed_position(wr, hr, 1.6, -25, 128, '309-2');
		
		bed_position(wr, hr, 1.7, -2, 90, '301-1');
		bed_position(wr, hr, 1.7, 14, 90, '301-2');
		
		bed_position(wr, hr, 1.6, 36, 55, '302-1');
		bed_position(wr, hr, 1.5, 50, 55, '302-2');
		
		bed_position(wr, hr, 1.25, 72, 16, '303-1');
		bed_position(wr, hr, 1.07, 85.15, 16, '303-2');
		
	});
	
	has_selected_bed_no = '0';
	function select_bed(bed_no) {
		var selected = $("#" + bed_no).children('img').first();
		
		if (selected.attr('col') == 'red') {
			alert('床位已经被"'+ selected.attr('name') + '"选了,请重新选择');
			return;
		}
		
		$('#order').attr('href', '#select_bed');
		
		if (has_selected_bed_no != '0') {
			$('#order_info').html('');
			var has_selected_bed = $("#" + has_selected_bed_no).children('img').first();
			has_selected_bed.attr('src', selected.attr('src').replace('selected', 'white'));
			has_selected_bed.attr('col', 'white');
			if (has_selected_bed_no == bed_no) {
				has_selected_bed_no = '0';
				return;
			}
			has_selected_bed_no = '0';
		}
		
		has_selected_bed_no = bed_no;
		$('#order_info').html('你选择了' + bed_no + '号床位');
		selected.attr('src', selected.attr('src').replace('white', 'selected'));
		selected.attr('col', 'selected');
		//$('#order').attr('href', '#selected_bed');
		$('#order').attr('href', 'javascript:order("' + bed_no + '");');
		//$('#selected_bed #selected_bed_no').html(bed_no);
		//$('#selected_bed #bed_no').val(bed_no);
	}
	
	href = location.href;
	function order(bed_no) {
		$.post('<%=request.getContextPath()%>/order', 'bed_no=' + bed_no, function(data) {
			location.href = href.substring(0, href.indexOf('#', 0));
		});
	}
	
	$(document).ready(function() {
		$('#order_submit_1').ajaxForm(function(data) {
			location.href = href.substring(0, href.indexOf('#', 0));
		});
		
		$('#order_submit_2').ajaxForm(function(data) {
			location.href = href.substring(0, href.indexOf('#', 0));
		});
	}); 
	
</script>
<div data-role="page" id = "page" style = "background-image: url('<%=request.getContextPath()%>/image/background.jpg');">
	<div data-role="main" id = "main">
		<div class = "all_room">
			<div id = "room_layout">
				<img src="<%=request.getContextPath()%>/image/room_layout.png" />
			</div>
			<c:forEach items="${allBeds}" var="bed">
				<div class = "room" id = "${bed.bed_no}" onclick="select_bed(id)">
					<img src = "<%=request.getContextPath()%>/image/${(orderedBed.bed_no == bed.bed_no) ? 'selected' : bed.color}_bed.png" col = "${bed.color}" name = "${bed.order_user_name}" />
				</div>
			</c:forEach>
		</div>
		<div id = "srcoll_words" >
			<marquee direction="left" behavior="scroll" >
				最新文件:
				<c:forEach items="${last_infos}" var = "info">
					<a href = "${info.url}" target="_blank">${info.title}</a>&nbsp;
				</c:forEach>
			</marquee>
		</div>
		<div id = "order_info">
			<c:choose>
				<c:when test="${msg == '0'}">预约出错,请重新进入此页面</c:when>
				<c:when test="${msg == '1'}">此床位已被预约了</c:when>
				<c:when test="${msg == '2'}">你已经预约了床位，不能再预约</c:when>
				<c:when test="${msg == '3' }">预约成功!</c:when>
				<c:when test="${msg == '4' }">你已经预约了${orderedBed.bed_no}号床位</c:when>
				<c:otherwise></c:otherwise>
			</c:choose>
		</div>
	</div>
	<div data-role="footer" data-position="fixed"  id = "footer">
		<div class="ui-grid-a">
      		<div class="ui-block-a">
  				<a href="#select_bed" data-rel="popup" data-position-to="window" data-transition="fade" class = "left_btn ui-btn ui-btn-inline" id = "order">预&nbsp;&nbsp;&nbsp;&nbsp;约&nbsp;&nbsp;&nbsp;&nbsp;</a>  
    			<div data-role="popup" id = "select_bed" class = "ui-content" data-overlay-theme="b">
    				<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a>
    				<form action = "<%=request.getContextPath()%>/order" method="post" id = "order_submit_1">
						<fieldset class = "ui-field-contain">
							<label>选择床位号</label>
							<select name="bed_no">
								<c:forEach items="${remainBeds}" var="bed">
									<option value = "${bed.bed_no}">${bed.bed_no}号床位</option>
								</c:forEach>
							</select>
						</fieldset>	    			
						<input type = "submit" data-inline="true" value = "提交" />
    				</form>
    			</div>
    			<div data-role="popup" id = "selected_bed" class = "ui-content" data-overlay-theme="b">
    				<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a>
    				<form action = "<%=request.getContextPath()%>/order" method="post" id = "order_submit_2">
						<div class = "ui-content">
    						你选择了<span id = "selected_bed_no"></span>号床位,是否确认预约?
    					</div>
						<input type = "hidden" name = "bed_no" id = "bed_no" value = "" />   			
						<input type = "submit" data-inline="true" value = "确认" />
    				</form>
    			</div>
    		</div>
	      	<div class="ui-block-b">
				<a href = "javascript:cancel();" class = "right_btn ui-btn ui-btn-inline" id = "cancel">取&nbsp;&nbsp;&nbsp;&nbsp;消&nbsp;&nbsp;&nbsp;&nbsp;</a>  
    		  </div>
    	</div>
    	<script>
    		function cancel() {
    			$.post('<%=request.getContextPath()%>/cancelOrder', '', function(result) {
    				var msg = "";
    				if (result == '0') {
    					msg = "你还没有预约床位";
    				} else {
    					msg = "取消预约成功";
    					var selected = $("#" + result).children('img').first();
    					selected.attr('src', selected.attr('src').replace('selected', 'white'));
    					selected.attr('col', 'white');
    				}
    				$('#order_info').html(msg);
    				
    			});
    		}
    	</script>
	</div>
</div>

</body>
</html>